<template>
     <div>
        <h1>图书管理系统</h1>
        <BookTable ref="bookTable"></BookTable>
        <el-form>
           <el-form-item label="添加的书籍名称">
              <el-input v-model="newBook.title"></el-input>
           </el-form-item>
           <el-form-item label="该书籍作者">
              <el-input v-model="newBook.author"></el-input>
           </el-form-item>
           <el-form-item label="添加几本">
              <el-input v-model="newBook.copies"></el-input>
           </el-form-item>
           <el-form-item>
              <el-button type="primary" @click="addBook">添加书籍</el-button>
           </el-form-item>
        </el-form>
     </div>
  </template>
  
  <script>
  import BookTable from './components/BookTable.vue'
  
  export default {
     components: {
        BookTable
     },
     data() {
        return {
           newBook: {
              title: '',
              author: '',
              copies: ''
           }
        }
     },
     methods: {
        addBook() {
           this.$refs.bookTable.books.push({
              id: this.$refs.bookTable.books.length + 1,
              title: this.newBook.title,
              author: this.newBook.author,
              copies: this.newBook.copies
           })
           this.newBook = {
              title: '',
              author: '',
              copies: ''
           }
        }
     }
  }
  </script>